<template>
	<view class="container">
		<view>
			<view class="status_bar" :style="{height:statusBarHeightStyle}">
				<!-- 这里是状态栏 -->
			</view>
			
		</view>
		<search-bar ref="search" :classifies='classifies'></search-bar>
		<view class="custom-pd-lr custom-mt">
			<swiper class="swiper-banner" circular indicator-color="#EBF9FC" indicator-active-color="#00B5DD"
				:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in imgURL" :key="index">
					<image class="custom-banner" @click="bannerLink(item)"
						:src="item.image">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<view class="custom-mt" style="background-color: #fff; border-radius: 16px 16px 0px 0px;">
			<view class="custom-column">
				<view class="channel">
					<view class="channel-item" @click="onChannelClick(index)" v-for="(item,index) in channelBar"
						:key="index"
						:class="{'channel-item-bg0':index == 0 ? true : false,'channel-item-bg1':index == 1 ? true : false,'channel-item-bg2':index == 2 ? true : false,'channel-item-bg3':index == 3 ? true : false,'channel-item-bg4':index == 4 ? true : false,'channel-item-bg5':index == 5 ? true : false, 'item-active':currentChannel == index? true:false}">
						{{item.pageName}}
					</view>
				</view>
				<view class="content">
					<view v-if="currentChannel === 0" style="width: 100%; padding-top: 30rpx;">
						<uni-grid :column="5" :showBorder="false" :square="false" :highlight="true">
							<uni-grid-item key="1">
								<view class="grid-item-box" style="background-color: #fff;"
									@click="goTo('../moyangScent/moyangScent')">
									<image mode="widthFix"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/mywd.png">
									</image>
									<text class="text">产品中心</text>
								</view>
							</uni-grid-item>
							
						</uni-grid>
					</view>
					<view v-if="currentChannel === 1" style="width: 100%; padding-top: 30rpx;">
						<uni-grid :column="5" :showBorder="false" :square="false" :highlight="true">
							<uni-grid-item key="6">
								<view class="grid-item-box" style="background-color: #fff;"
									@click="goTab('/pages/agricultureService/agricultureService')">
									<image mode="widthFix"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/wynf.png">
									</image>
									<text class="text">网约农服</text>
								</view>
							</uni-grid-item>
							<uni-grid-item key="7">
								<view class="grid-item-box" style="background-color: #fff;"
									@click="outLink('../fishery/fishery')">
									<image mode="widthFix"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/sczy.png">
									</image>
									<text class="text">水产作业</text>
								</view>
							</uni-grid-item>
						
						</uni-grid>
					</view>
					<view v-if="currentChannel === 2" style="width: 100%; padding-top: 30rpx;">
						<uni-grid :column="5" :showBorder="false" :square="false" :highlight="true">
							<uni-grid-item key="11">
								<view class="grid-item-box" style="background-color: #fff;"
									@click="goTab('/pages/agricultureLecture/agricultureLecture')">
									<image mode="widthFix"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/nkjt.png">
									</image>
									<text class="text">农科讲堂</text>
								</view>
							</uni-grid-item>
							<uni-grid-item key="12">
								<view class="grid-item-box" style="background-color: #fff;"
									@click="goTo('../beautyCity/beautyCity')">
									<image mode="widthFix"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/mlyj.png">
									</image>
									<text class="text">新闻资讯</text>
								</view>
							</uni-grid-item>
							<uni-grid-item key="13">
								<view class="grid-item-box" style="background-color: #fff;"
									@click="goTo('../subsidy/subsidy')">
									<image mode="widthFix"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/btzc.png">
									</image>
									<text class="text">补贴政策</text>
								</view>
							</uni-grid-item>
							
						</uni-grid>
					</view>
					<view v-if="currentChannel === 3" style="width: 100%; padding-top: 30rpx;">
						<uni-grid :column="5" :showBorder="false" :square="false" :highlight="true">
							<uni-grid-item key="17">
								<view class="grid-item-box" style="background-color: #fff;"
									@click="goTo('../takePhotos/takePhotos')">
									<image mode="widthFix"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/ssp.png">
									</image>
									<text class="text">随手拍</text>
								</view>
							</uni-grid-item>
							<uni-grid-item key="16">
								<view class="grid-item-box" style="background-color: #fff;"
									@click="goTo('../loanService/loanService')">
									<image mode="widthFix"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/xdfw.png">
									</image>
									<text class="text">信贷服务</text>
								</view>
							</uni-grid-item>
							
						</uni-grid>
					</view>
					<view v-if="currentChannel === 4" style="width: 100%; padding-top: 30rpx;">
						<uni-grid :column="5" :showBorder="false" :square="false" :highlight="true">
							<uni-grid-item key="20">
								<view class="grid-item-box" style="background-color: #fff;"
									@click="goTo('../priceList/priceList')">
									<image mode="widthFix"
										src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/cphq.png">
									</image>
									<text class="text">产品行情</text>
								</view>
							</uni-grid-item>
							
						</uni-grid>

					</view>
					
				</view>
			</view>
			<view class="custom-pd-lr" style="background-color: #fff;" v-if="minibanner.image">
				<image class="custom-banner" :src="minibanner.image + '?x-image-process=style/style-card'"
					mode="widthFix"></image>
			</view>

			<view class="custom-bg-white" :class="{'st':true,'sticky-fixed':isF}">
				<uni-row :gutter="gutter" :width="windowWidth">
					<view style="align-items: center; display: flex; overflow: hidden; flex-flow: row nowrap;">
						<uni-col :span="22">
							<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" >
								<view style="margin-left: 20px;">
									<text class="uni-tab-item-title uni-tab-item-title-active">精品推荐</text>
								</view>
							</scroll-view>
						</uni-col>
					</view>
				</uni-row>
			</view>
			<view class="list">
				<uni-row :width="windowWidth" :gutter="25">
					<uni-col :span="12">
						<view v-for="(item,index) in listLeft" :key="index" class="list-con"
							@click="goTo('../productDetails/productDetails?id='+item.id)">
							<view class="list-img">
								<image  class="image" mode="widthFix"
									:src="item.image">
								</image>
								  <text class="img-icon" v-if="item.produceType===1">水果</text>
								  <text class="img-icon" v-else-if="item.produceType===2">蔬菜</text>
								  <text class="img-icon" v-else>其他</text>
							</view>
							<text class="list-text">{{item.title}}</text>
							<view class="uni-flex list-info">
								<view class="author">
									<text class="authorname">¥{{item.price}}</text>
								</view>
								<view class="see"><uni-icons type="eye" color="#9498A0"
										size="14"></uni-icons><text>{{item.browseNum}}</text></view>
							</view>
						</view>
					</uni-col>
					<uni-col :span="12">
						<view v-for="(item,index) in listRight" :key="index" class="list-con"
							@click="goTo('../productDetails/productDetails?id='+item.id)">
							<view class="list-img">
								<image v-if="item.image" class="image" mode="widthFix"
									:src="item.image">
								</image>
								  <text class="img-icon" v-if="item.produceType===1">水果</text>
								  <text class="img-icon" v-else-if="item.produceType===2">蔬菜</text>
								  <text class="img-icon" v-else>其他</text>
							</view>
							<text class="list-text">{{item.title}}</text>
							<view class="uni-flex list-info">
								<view class="author">
									<text class="authorname">¥{{item.price}}</text>
								</view>
								<view class="see"><uni-icons type="eye" color="#9498A0"
										size="14"></uni-icons><text>{{item.browseNum}}</text></view>
							</view>
						</view>
					</uni-col>
					

				</uni-row>
				<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>
			</view>
		</view>
		<view>
			
		</view>
	</view>
</template>

<script>
	import {
		baseurl,
		queryLocation,
		queryWeather,
		queryLocalResources,
		queryAppAdList,
	} from "@/api/user.js"

	import {
		formatLocation
	} from '../../utils/common.js'
	export default {
		data() {
			return {
				location: '',
				weather: {},
				keyWord: '',
				classifies: ['999'],
				imgURL: [{
					'image':'/static/image/1.png'
				},{
					'image':'/static/image/2.png'
				}],
				minibanner: {'image':'/static/image/banner.png'},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				channelBar: [{
						pageName: '农供销',
						pageId: '012',
						icon: 'https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel1.png',
						path: ''	
					},
					{
						pageName: '农管家',
						pageId: '013',
						icon: 'https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel2.png',
						path: ''
					},
					{
						pageName: '农资讯',
						pageId: '014',
						icon: 'https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel3.png',
						path: ''
					},
					{
						pageName: '农金融',
						pageId: '015',
						icon: 'https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel4.png',
						path: ''
					},
					{
						pageName: '农行情',
						pageId: '016',
						icon: 'https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel5.png',
						path: ''
					}
				],
				channelBarList: ['农供销', '农管家', '农资讯', '农金融', '农行情', '农气象'],
				tabIndex: 0,
				tabBars: [],
				tabCondition: '',
				scrollInto: "",
				gutter: 0,
				type: 'center',
				stickyH: uni.upx2px(1000),
				isF: false,
				isVideo: true,
				statusBarHeightStyle: '25px',
				windowWidth: 375,
				navBarWidth: 375,
				navBarHeight: 45,
				list: [],
				page: 1,
				maxpage: 0,
				listLeft: [],
				listRight: [],
				showLoadMore: false,
				currentChannel: 0,
			

			}
		},
		onPageScroll(e) {
			if (this.stickyH > e.scrollTop) {
				this.isF = false;
			} else {
				this.isF = true
			}
		},
		onLoad() {

		},
		onShow() {
			this.serviceType = getApp().globalData.serviceType;
			this.statusBarHeightStyle = getApp().globalData.statusBarHeight + 'px';
			this.windowWidth = getApp().globalData.windowWidth;
			this.navBarWidth = getApp().globalData.navBarWidth;
			this.navBarHeight = getApp().globalData.navBarHeight;
			this.initData();
			
		},
		onHide() {
			clearInterval(this.timer);
		},
		onPullDownRefresh() {
			this.serviceType = getApp().globalData.serviceType;
			this.statusBarHeightStyle = getApp().globalData.statusBarHeight + 'px';
			this.windowWidth = getApp().globalData.windowWidth;
			this.navBarWidth = getApp().globalData.navBarWidth;
			this.navBarHeight = getApp().globalData.navBarHeight;
			this.initData();
		},
		onReachBottom() {
			if (this.page >= this.maxpage) {
				this.showLoadMore = false;
				return
			}
			this.showLoadMore = true;
			this.page++;
			this.queryLocalResources({
				"page": this.page,
				"pageSize": 10
			});
		},

		methods: {
			async queryLocation(options) {
				const res = await queryLocation(options);
				this.location = res.returnObj.address;
				//uni.setStorageSync('location_key',this.location)
			},
			async queryWeather(options) {
				const res = await queryWeather(options);
				this.weather = res.returnObj;
				//uni.setStorageSync('weather_key',this.weather)
			},
			async queryLocalResources(options) {
				const res = await queryLocalResources(options)
				this.showLoadMore = false
				console.log('精品推荐接口响应:', res)
				
				// 判断接口是否成功（兼容两种格式：code==200 或 success==true）
				if (res.success || res.code==200) {
					// 计算总页数
					if (res.total && options.pageSize) {
						this.maxpage = Math.ceil(res.total / options.pageSize);
					}
				
					let tempArr = res.rows.map(item=>{
						// 后端已返回完整的MinIO URL，无需再拼接
						// 如果image不包含http开头，才拼接本地地址
						if (item.image && !item.image.startsWith('http')) {
							item.image = "http://localhost:8080" + item.image
						}
						return item;
					})
				
					tempArr.forEach((item, index) => {
						if (index % 2 != 0) {
							this.listRight.push(item)
						} else {
							this.listLeft.push(item)
						}
					})
					console.log('精品推荐数据 - 左列:', this.listLeft)
					console.log('精品推荐数据 - 右列:', this.listRight)
				} else {
					console.error('精品推荐接口返回失败:', res)
				}
			},
			async queryAppAdList(options) {
				const res = await queryAppAdList(options);
				console.log("appres", res)
				let temp = res.returnObj
				if (res.success) {
					temp.forEach((i) => {
						if (i.area == '1') {
							this.imgURL = i.adProperties
						}
						if (i.area == '3') {
							this.minibanner = i.adProperties[0]
						}
					})
				}
			},

		

			initData() {
				this.page = 1;
				this.maxpage = 1;
				this.listLeft = [];
				this.listRight = [];
				this.showLoadMore = true;
				this.queryLocalResources({
					"page": this.page,
					"pageSize": 10
				});
				uni.stopPullDownRefresh();
			},
			chooseLocation: function() {
				console.log("locationtest")
				uni.chooseLocation({
					success: (res) => {
						//this.location = formatLocation(res.longitude, res.latitude),
						this.location = res.address
					}
				})
			},
			
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			bannerLink(e) {
			},
			getSort(type) {
				let name = '';
				this.serviceType.forEach((i) => {
					if (i.id == type) {
						name = i.name
					}
				})
				return name
			},
			goTo(e) {
				
				console.log(this.keyWord, e)
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
			goTab(e) {
				var url = e;
				uni.switchTab({
					url: url
				});
			},
			outLink(e) {
				var url = e;
				console.log("url", url)
				wx.navigateTo({
					url: url
				})
			},
			onTabBarChange(index) {
				this.activeIndex = index;
			},
			onChannelClick(e) {
				if (this.currentChannel != e) {
					this.currentChannel = e;
				}
			},

			ontabtap(e) {
				console.log(e)
				this.tabCondition = e.currentTarget.id.slice(1)
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);
			},

			ontabchange(e) {
				let index = e.target.current || e.detail.current;
				this.switchTab(index);
			},
			channelChange() {

			},
			bannerChange(e) {
				this.current = e.detail.current;
			},
			quickTabChange(code, index) {
				this.tabCondition = code
				this.scrollInto = 'i' + code;
				this.switchTab(index);
				this.$refs.popup.close()
			},
			switchTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index;
				let options = {
					condition: {
						code: this.tabCondition
					},
					pageNum: 1,
					pageSize: 10
				}
				this.listLeft = [];
				this.listRight = []
				this.queryLocalResources(options)
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background-image: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-color: linear-gradient(180deg, #0089D6 0%, rgba(0, 163, 214, 0.59) 55.21%, #FFFFFF 100%);

		/* #ifdef MP */
		/* .test {
			position: absolute;
			bottom: 15px;
			right: 20rpx;
			display: block;
			width: 80rpx;
			height: auto;
		} */

		/* #endif */
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		//background-color: #ffffff;
	}

	/* 状态栏样式 */
	.custom-location {
		font-size: 32rpx;
		padding-left: 10rpx;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #ffffff;

		uni-text {
			margin-left: 10rpx;
		}
	}

	.custom-weather {
		color: #ffffff;
		font-size: 40rpx;
		font-family: 'DIN';
		display: flex;
		align-items: center;
		flex-wrap: nowrap;

		image {
			width: 60rpx;
			margin-left: 6rpx;
			// margin-right: 30rpx;
		}
	}

	/* 搜索栏 */
	.search-bar /deep/ .uni-searchbar__box {
		justify-content: left !important;
	}

	.search-tips {
		padding: 2px 8px;
		height: 24px;
		line-height: 24px;
		background-color: #ffffff;
		border-radius: 20px;
		color: #505863;
		font-size: 24rpx;
		margin-left: 24rpx;
	}

	/* banner1 */
	.swiper-banner {
		height: 300rpx;
		border-radius: 12px;
	}

	.custom-banner {
		width: 100%;
		height: 100%;
		//height: auto;
		border-radius: 12px;
	}

	/* 栏目 */
	.channel {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F0F1F1;
	}

	.channel-item {
		padding-top: 70rpx;
		height: 114rpx;
		line-height: 44rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: 28rpx;
		color: #646A74;
		border-bottom: 3px solid #ffffff;
	}

	.item-active {
		color: #283241;
		border-bottom: 3px solid #22AFFF;
	}

	.channel-item-bg0 {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel0.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.channel-item-bg0.item-active {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel0a.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.channel-item-bg1 {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel1.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.channel-item-bg1.item-active {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel1a.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.channel-item-bg2 {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel2.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.channel-item-bg2.item-active {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel2a.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.channel-item-bg3 {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel3.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.channel-item-bg3.item-active {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel3a.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.channel-item-bg4 {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel4.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.channel-item-bg4.item-active {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel4a.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.channel-item-bg5 {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel5.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.channel-item-bg5.item-active {
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/channel5a.png') no-repeat top center;
		background-size: 64rpx 64rpx;
	}

	.custom-column {
		width: 100%;
		padding-top: 15px;
	}

	.content {
		width: 100%;
		height: 89px;
		margin-bottom: 30rpx;
	}

	.grid-item-box {
		background: none !important;
		text-align: center;
		margin-bottom: 15px;
		display: inline-block;
	}

	.grid-item-box .text {
		font-size: 24rpx;
		height: 20px;
		line-height: 20px;
		display: block;
		color: #646A74;
	}

	.grid-item-box image {
		width: 88rpx;
	}

	/* list-tab */
	.swiper-box {
		display: flex;
		flex: 1;
		height: 1000px;
	}

	.swiper-item {
		display: flex;
		flex: 1;
		flex-direction: row;
	}

	.scroll-h {
		background-color: #ffffff;
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		overflow: hidden;
	}

	.uni-tab-item {
		display: inline-block;
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.uni-tab-item-title {
		color: #646A74;
		font-size: 28rpx;
		height: 72rpx;
		line-height: 72rpx;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.uni-tab-item-title-active {
		display: inline-block;
		font-size: 32rpx;
		font-weight: bold;
		color: #283241;
		line-height: 72rpx;
		height: 72rpx;
		border-bottom: 3px solid #00C3CF;
	}

	.list {
		padding: 15px 30rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.listbox {
		width: 100%;
		display: inline-flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: flex-start;
		align-content: flex-start;
	}

	.list-con {
		width: 100%;
		padding: 0px;
		margin-bottom: 15px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.list-con .list-text {
		padding: 0 16rpx;
		max-height: 44px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-img {
		position: relative;
	}

	.list-img .img-icon {
		position: absolute;
		left: 0;
		top: 0;
		display: inline-block;
		width: 128rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		text-align: center;
		color: #ffffff;
		background-image: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/tag-1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.list-img .video-cover {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.list-img .video-cover image {
		width: 40px;
		height: 40px;
	}

	.list-img .image {
		width: 100%;
		border-radius: 8px 8px 0px 0px;
	}


	.list-text {
		font-size: 28rpx;
		color: #283241;
		line-height: 22px;
		max-height: 44px;
		padding: 0 10rpx;
		overflow: hidden;
		font-weight: bold;
	}

	.sticky-fixed {
		position: fixed;
		top: 0px;
		background-color: #ffffff;
		padding-top: 28px;
		z-index: 999;
		left: 0;
		right: 0;
	}
</style>